<template>
	<view>
		<view class='searchBox'>
			<view class='searchs'>
				<icon type='search' size='16'></icon>
				<input type='text' placeholder='课程/教师' placeholder-class='placeholder'></input>
			</view>
			<view class='searchBtn'>搜索</view>
		</view>

		<view class='posi_rela'>
			<view class='posi_rela' style='z-index:9;'>
				<scroll-view scroll-x="true" class="tabs" @click="tabFun">
					<view :class="tabArr.curHdIndex=='0'? 'active' : ''" id="tab-hd01" data-id="0">语文</view>
					<view :class="tabArr.curHdIndex=='1'? 'active' : ''" id="tab-hd02" data-id="1">数学</view>
					<view :class="tabArr.curHdIndex=='2'? 'active' : ''" id="tab-hd03" data-id="2">英语</view>
					<view :class="tabArr.curHdIndex=='3'? 'active' : ''" id="tab-hd04" data-id="3">政治</view>
					<view :class="tabArr.curHdIndex=='4'? 'active' : ''" id="tab-hd05" data-id="4">历史</view>
					<view :class="tabArr.curHdIndex=='5'? 'active' : ''" id="tab-hd06" data-id="5">地理</view>
				</scroll-view>
				<view class='filterBox' @click='onFliter'>
					筛选 <image :src="filterIcon ? '../../static/ic_zhankai2x.png' : '../../static/ic_shou2x.png'"></image>
				</view>
			</view>

			<!-- 筛选菜单 -->
			<view class='filterMask' v-show='filterMask'></view>
			<view class='popFilter' v-show='popFilter'>
				<view class='labelBox'>
					<view class='filterTitle'>年级</view>
					<view class='filterLabels'>
						<view class='filterLabel curr'>小学一年级</view>
						<view class='filterLabel'>小学二年级</view>
						<view class='filterLabel'>小学三年级</view>
						<view class='filterLabel'>小学四年级</view>
						<view class='filterLabel'>小学五年级</view>
					</view>
					<view class='filterTitle'>版教</view>
					<view class='filterLabels'>
						<view class='filterLabel'>人教版</view>
						<view class='filterLabel curr'>鲁教版</view>
						<view class='filterLabel'>冀教版</view>
						<view class='filterLabel'>沪教版</view>
					</view>
					<view class='filterTitle'>课程</view>
					<view class='filterLabels'>
						<view class='filterLabel curr'>同步课程</view>
						<view class='filterLabel'>整体课程</view>
						<view class='filterLabel'>知识点课程</view>
						<view class='filterLabel'>知识点课程</view>
					</view>
				</view>
				<view class='bottomMenu'>
					<view>重置</view>
					<view class='select' @click='onComplete'>完成(3)</view>
				</view>
			</view>


			<view class="tabContent">
				<!-- 语文 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='0'? 'active' : ''">
					<view class="">
						<!-- 轮播图 -->
						<view class='swipers'>
							<swiper class="swiper" indicator-dots="true" indicator-color="rgba(255, 255, 255, .4)" indicator-active-color="#fff"
							 autoplay="true" circular='true' :interval="interval" :duration="duration">
								<swiper-item v-for="(item, index) in swipers" :key="index">
									<image :src="item.src" />
								</swiper-item>
							</swiper>
						</view>
						<!-- 菜单 -->
						<view class='menus'>
							<navigator url='' class='menu' v-for="(menu, index) in menus" :key="index">
								<image :src='menu.src'></image>
								<view class="color_5C">{{menu.txt}}</view>
							</navigator>
						</view>

						<view class="jxBox">
							<view class="jxInfo">
								<view class="jxTitle">{{jxTitle}}</view>
								<view class="jxName">{{jxSub}}</view>
								<view class="jxTxt">{{jxTxt}}</view>
							</view>
							<view class="posi_rela">
								<image :src="jxSrc" class="jxImg"></image>
								<image :src="jxIcon" class="bfImg"></image>
							</view>
						</view>

						<!-- 热门排行 -->
						<view class="itemTitle">热门排行</view>
						<view class="hot">
							<view class="hotTop bottomLine">
								<view class="hotImg">
									<image src="../../static/img_012.png"></image>
								</view>
								<view class="hotInfo">
									<view class="fs_32">课程名称课程名称课程名称</view>
									<view class="justify_between">
										<view class="renNum">
											<image src="../../static/icon_people2x.png"></image>12.1万人
										</view>
										<navigator url="" class="try">
											<image src="../../static/icon_play2.png"></image>试听
										</navigator>
									</view>
								</view>
							</view>

							<view class="justify_between p_20">
								<view class="hotBottom" v-for="(hot, index) in hots" :key="index">
									<image :src="hot.src"></image>
									<view>
										<view class="fs_32">{{hot.title}}</view>
										<view class="justify_between mt_20">
											<view class="renNum">
												<image :src="hot.peopleIcon"></image>{{hot.people}}万人
											</view>
											<navigator url="" class="try">
												<image :src="hot.try"></image>试听
											</navigator>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 本周精选 -->
						<view class="itemTitle">本周精选</view>
						<view class="hot">
							<view class="jxBanner">
								<image :src="jxBanner"></image>
							</view>

							<view class="hotTop topLine" v-for="(select, index) in selects" :key="index">
								<view class="jxs">
									<image :src="select.src"></image>
									<view class="renNum renNum2">
										<image :src="select.peopleIcon"></image>{{select.people}}万人
									</view>
								</view>
								<view class="hotInfo">
									<view class="fs_32">{{select.title}}</view>
									<view class="justify_between">
										<view class="renNum">
											已更新{{select.updata}}期
										</view>
										<view class="color_red fs_30">￥{{select.price}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 数学 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='1'? 'active' : ''">222</view>
				<!-- 英语 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='2'? 'active' : ''">333</view>
				<!-- 政治 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='3'? 'active' : ''">444</view>
				<!-- 历史 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='4'? 'active' : ''">555</view>
				<!-- 地理 -->
				<view class="tabCont-item" :class="tabArr.curBdIndex=='5'? 'active' : ''">666</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tab
				tabArr: {
					curHdIndex: 0,
					curBdIndex: 0
				},
				// 筛选
				filterIcon: false,
				filterMask: false,
				popFilter: false,
				interval: 2000,
				duration: 500,
				swipers:[
					{
						src: '../../static/img_zhibo2x.png'
					},
					{
						src: '../../static/img_zhibo2x.png'
					}
				],
				menus: [
					{
						src: '../../static/icon_dijiamiaosha2x.png',
						txt: '底价秒杀'
					},
					{
						src: '../../static/icon_mianfeihaoke2x.png',
						txt: '免费好课'
					},
					{
						src: '../../static/icon_meirihongbao2x.png',
						txt: '每日红包'
					},
					{
						src: '../../static/icon_qiandaozhongxin2x.png',
						txt: '签到中心'
					}
				],
				jxTitle: '本周精选课',
				jxSub: '课程名称',
				jxTxt: '课程内容课程内容课程内容课程内容课程内容课程内容课程内容',
				jxSrc: '../../static/img_jingxuanke2x.png',
				jxIcon: '../../static/icon_suspend2x.png',
				hots: [
					{
						src: '../../static/img_012.png',
						title: '课程名称课程名称课程名称',
						peopleIcon: '../../static/icon_people2x.png',
						people: 12.1,
						try: '../../static/icon_play2.png'
					},
					{
						src: '../../static/img_012.png',
						title: '课程名称课程名称课程名称',
						peopleIcon: '../../static/icon_people2x.png',
						people: 12.1,
						try: '../../static/icon_play2.png'
					}
				],
				jxBanner: '../../static/img_benhzoujingxuan2x.png',
				selects: [
					{
						src: '../../static/img_03.png',
						peopleIcon: '../../static/icon_people2x.png',
						people: 12.1,
						title: '课程名称课程名称课程名称',
						updata: 27,
						price: 399
					},
					{
						src: '../../static/img_03.png',
						peopleIcon: '../../static/icon_people2x.png',
						people: 12.1,
						title: '课程名称课程名称课程名称',
						updata: 27,
						price: 399
					}
				]
			};
		},
		methods: {
			// tab
			tabFun: function(e) {
				//获取触发事件组件的dataset属性  
				var _datasetId = e.target.dataset.id;
				// console.log("----" + _datasetId + "----");
				var _obj = {};
				_obj.curHdIndex = _datasetId;
				_obj.curBdIndex = _datasetId;
				this.tabArr = _obj
			},

			// 筛选按钮
			onFliter: function() {
				this.filterIcon = !this.filterIcon,
					this.filterMask = !this.filterMask,
					this.popFilter = !this.popFilter
			},
			onComplete: function() {
				this.filterIcon = false,
					this.filterMask = false,
					this.popFilter = false
			}
		}
	}
</script>

<style lang="scss">
	.searchBox {
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 9;
	}

	.searchs {
		display: flex;
		background-color: #F1F5F8;
		border-radius: 40rpx;
		padding: 15rpx 30rpx;
		width: 530rpx;
	}

	.searchs icon {
		margin-top: 10rpx;
	}

	.searchs input {
		padding-left: 15rpx;
		width: 100%;
	}

	.placeholder {
		font-size: 30rpx;
		color: #8D9194;
	}

	.searchBtn {
		color: #9D9D9D;
		font-size: 32rpx;
	}

	/* tab */
	.tabs {
		display: flex;
		line-height: 2.5;
		background: #fff;
		white-space: nowrap;
	}

	.tabs view {
		display: inline-block;
		color: #686868;
		text-align: center;
		font-size: 30rpx;
		border-bottom: 1rpx solid #eee;
		width: 140rpx;
	}

	.tabs view:last-child {
		margin-right: 150rpx;
	}

	.tabs .active {
		color: #000;
		position: relative;
	}

	.tabs .active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 20%;
		height: 5rpx;
		background: #1F7AFF;
		margin: 0 auto;
	}

	.tabContent {
		padding: 30rpx;
	}

	.tabContent .tabCont-item {
		display: none;
	}

	.tabContent .tabCont-item.active {
		display: block;
	}

	/* 筛选 */
	.filterBox {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		line-height: 80rpx;
		background-color: #fff;
		font-size: 30rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		box-shadow: -10rpx 0 10rpx #eee;
		color: #2E90FF;
	}

	.filterBox image {
		width: 18rpx;
		height: 11rpx;
		vertical-align: middle;
	}

	/* 筛选按钮 */
	.filterMask {
		position: fixed;
		top: 210rpx;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 8;
	}

	.popFilter {
		position: absolute;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 9;

	}

	.labelBox {
		padding: 30rpx;
	}

	.filterTitle {
		font-size: 26rpx;
		color: #626262;
	}

	.filterLabels {
		display: flex;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.filterLabel {
		background: #f1f1f1;
		font-size: 26rpx;
		color: #626262;
		padding: 15rpx 0;
		margin-right: 3%;
		width: 30%;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.curr {
		background-color: #D3E5FF;
		color: #116FF9;
	}

	.bottomMenu {
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
	}

	.bottomMenu view {
		flex: 1;
		text-align: center;
		line-height: 3;
	}

	.bottomMenu view:last-child {
		border-left: 1rpx solid #eee;
	}

	.select {
		background-color: #589FFF;
		color: #fff;
	}

	/* 语文模块 */
	/* 轮播图 */
	.swiper {
		height: 234rpx;
	}

	.swiper image {
		width: 100%;
		height: 234rpx;
	}

	/* 菜单 */
	.menus {
		padding: 30rpx 0;
	}

	.menu {
		display: inline-block;
		width: 25%;
		text-align: center;
	}

	.menu image {
		width: 68rpx;
		height: 68rpx;
	}

	.jxBox {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.jxImg {
		width: 190rpx;
		height: 190rpx;
		display: block;
	}

	.bfImg {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
	}

	.jxTitle {
		color: #C7983E;
		font-size: 36rpx;
		font-family: SimSun;
		font-weight: 600;
	}

	.jxInfo {
		margin-right: 50rpx;
	}

	.jxName {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 2;
	}

	.jxTxt {
		font-size: 30rpx;
		color: #949494;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	/* 热门 */
	.itemTitle {
		padding: 20rpx 0;
		font-size: 34rpx;
	}

	.hot {
		background-color: #fff;
		border-radius: 10rpx;
	}

	.hotTop {
		padding: 20rpx;
		display: flex;
	}

	.hotImg image {
		width: 326rpx;
		height: 186rpx;
	}

	.hotInfo {
		margin-left: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.renNum {
		color: #BCBCBC;
		font-size: 24rpx;
	}

	.renNum image {
		width: 22rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}

	.try {
		background-color: #FF5930;
		border-radius: 30rpx;
		color: #fff;
		padding: 10rpx 20rpx;
	}

	.try image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.hotBottom {
		width: 306rpx;
	}

	.hotBottom>image {
		width: 100%;
		height: 166rpx;
	}

	/* 精选 */
	.jxBanner {
		padding: 20rpx;
	}

	.jxBanner image {
		width: 100%;
		height: 214rpx;
		display: block;
	}

	.jxs {}

	.jxs>image {
		width: 232rpx;
		height: 132rpx;
		display: block;
	}

	.renNum2 {
		background-color: #F4F4F4;
		padding: 5rpx 0;
		text-align: center;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
</style>
